<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务六：基础JavaScript练习（三）</title>
    <link type="text/css" rel="stylesheet" href="../../public/css/style.css"/>
</head>
<style>
    #sequence{
        margin-top:20px;
        font-size: 18px;
    }
    #sequence span{
        /*width: 10px;*/
        /*height: 10px;*/
        padding: 10px 10px;
        background-color: red;
        margin-left:10px;
        cursor:pointer;
    }
    button{
        cursor:pointer;
    }
</style>
<body>
<div class="nav">
    <a href="https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务六：基础JavaScript练习（三）/index.html" target="_blank">demo源码</a>
    <a href="http://ife.baidu.com/course/detail/id/107">查看原题</a>
    <a href="http://ife.giscafer.com">返回demo演示站</a>
</div>
<div id="code-display">
    <p>基于任务四进行升级</p>
    <p>将新元素输入框从input改为textarea；</p>
    <p>允许一次批量输入多个内容，格式可以为数字、中文、英文等，可以通过用回车，逗号（全角半角均可），顿号，空格（全角半角、Tab等均可）等符号作为不同内容的间隔；</p>
    <p>增加一个查询文本输入框，和一个查询按钮，当点击查询时，将查询词在各个元素内容中做模糊匹配，将匹配到的内容进行特殊标识，如文字颜色等。</p>
    <p>举例，内容中有abcd，查询词为ab或bc，则该内容需要标识</p>
</div>

<div id="source">
    <h2>demo演示</h2>
    <div>
        <textarea id="in" style="width:400px;height:100px;"></textarea>
        <button onclick="insertLeft()">左侧入</button>
        <button onclick="insertRight()">右侧入</button>&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="removeLeft()">左侧出</button>
        <button onclick="removeRight()">右侧出</button>
        <br>
        <input type="text" id="search-input"/>
        <button onclick="search()">查询</button>
        <button onclick="reset()">重置查询</button>
        <div id="sequence">
            <span>11</span>
            <span>12</span>
            <span>13</span>
        </div>
    </div>
</div>
<script>
    var sequenceDom=document.getElementById("sequence");
    var inputDom=document.getElementById("in");
    var searchInput=document.getElementById("search-input");

    /**
     * 获取input值
     */
    function getInputValue(){
        //支持逗号，分号，空格，顿号等
        var value=inputDom.value.split(/[,]|[ ]|[;]|[、]|[，]|[；]|[  ]/);
        return value.reverse();
    }
    /**
     * 获取序列的值，返回数组
     * */
    function getSequenceDomValues(){
        var result=[];
        var temp=sequenceDom.children;
        for(var i=0;i<temp.length;i++){
            result.push(temp[i].innerText)
        }
        return result;
    }
    /**
     * 高亮查询到的元素
     * */
    function highlight(value){
        var temp=sequenceDom.children;
        for(var i=0;i<temp.length;i++){
            if(temp[i].innerText==value){
                temp[i].style.backgroundColor='green';
            }
        }
    }
    //查询
    function search(){
        var search_result=[];
        var keyvalue=searchInput.value;
        var sequences=getSequenceDomValues();
        for(var j=0;j<sequences.length;j++){
            if(sequences[j].indexOf(keyvalue)!==-1){
                highlight(sequences[j])
            }
        }
    }
    //reset
    function reset(){
        var temp=sequenceDom.children;
        for(var i=0;i<temp.length;i++){
            temp[i].style.backgroundColor='red';
        }
    }

    function insertLeft(){
        var data=getInputValue();
        var oFragment=document.createDocumentFragment();
        for(var i=0;i<data.length;i++){
            var span=document.createElement("span");
            span.innerText= data[i];
            oFragment.appendChild(span)
        }
        sequenceDom.insertBefore(oFragment,sequenceDom.children[0]);

    }
    function insertRight(){
        var data=getInputValue();
        var oFragment=document.createDocumentFragment();
        for(var i=0;i<data.length;i++){
            var span=document.createElement("span");
            span.innerText= data[i];
            oFragment.appendChild(span)
        }
        sequenceDom.appendChild(oFragment);
    }
    function removeLeft() {
        var temp=sequenceDom.children[0];
        alert('移除左侧数字：'+temp.innerText)
        sequenceDom.removeChild(temp);
    }
    function removeRight() {
        var temp=sequenceDom.children[sequenceDom.children.length-1];
        alert('移除右侧数字：'+temp.innerText);
        sequenceDom.removeChild(temp);
    }
    /**
     * 可以使用事件委托的方式绑定点击事件
     */
    sequenceDom.addEventListener('click',function(e){
        console.log(e)
        if(e.target && e.target.nodeName==='SPAN'){
            sequenceDom.removeChild(e.target);
        }
    });
</script>
</body>
</html>